<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire">
    <image
      style="position: fixed; top: 0; z-index: -10; width: 100vw; height: 100vh"
      :src="loginBg"
      mode="aspectFill"
    />
    <view class="div1">
      <ProductBackbar
        title="格兰富中国产品中心"
        title-en="Grundfos China Product Center"
        height="120"
      />
      <!-- 一级选择器 -->
      <wht-tabs
        v-model="pageData.tab1"
        :list="pageData.tabList1"
        bgColor="#00000000"
        color="#ffffff"
        active-color="#ffffff"
        line-color="#ffffff"
        :font-size="28"
        :min-width="175"
        :padding="100"
      />
      <view style="margin-top: 30rpx">
        <divider-white />
      </view>
    </view>
    <scroll-view
      ref="scrollContainer"
      scroll-y="true"
      class="div2"
      enable-flex="true"
      :style="{ height: pageData.div2Height + 'px' }"
    >
      <view v-if="pageData.tab1 === 0">
        <view class="search-container">
          <view class="search-tip">
            <image class="tip-icon" src="/static/images/icons/productCenter/icon_light.png"></image>
            <text class="tip-text">提示：请输入"产品编码"或"产品型号"进行查询</text>
          </view>
          <view class="search-box">
            <image
              class="search-icon"
              src="/static/images/icons/productCenter/icon_search.png"
            ></image>
            <input
              class="search-input"
              type="text"
              placeholder="请输入关键词进行搜索"
              placeholder-style="color: #8da6bd;"
              v-model="pageData.keyword"
            />
          </view>
          <view class="search-button-container">
            <button class="dbs-search-button" @click="searchProducts">DBS产品搜索</button>
          </view>
        </view>
      </view>
      <view v-if="pageData.tab1 === 1">
        <view class="search-container">
          <view class="search-tip">
            <image class="tip-icon" src="/static/images/icons/productCenter/icon_light.png"></image>
            <text class="tip-text">提示：请至少填写一个查询条件进行产品查询</text>
          </view>

          <!-- 产品型号 -->
          <view class="form-item">
            <view class="form-label">产 品 型 号</view>
            <view class="form-input-box">
              <input
                class="form-input"
                type="text"
                placeholder="请输入完整/部分产品型号"
                placeholder-style="color: #8da6bd;"
                v-model="pageData.advancedSearch.model"
              />
            </view>
          </view>

          <!-- 产品编码 -->
          <view class="form-item">
            <view class="form-label">产 品 编 码</view>
            <view class="form-input-box">
              <input
                class="form-input"
                type="text"
                placeholder="请输入完整/部分产品编码"
                placeholder-style="color: #8da6bd;"
                v-model="pageData.advancedSearch.code"
              />
            </view>
          </view>

          <!-- 最大扬程区间 -->
          <view class="form-item">
            <view class="form-label">最大扬程区间</view>
            <view class="form-range">
              <view class="range-input-box">
                <input
                  class="range-input"
                  type="number"
                  placeholder="例：100"
                  placeholder-style="color: #8da6bd;"
                  v-model="pageData.advancedSearch.liftMin"
                />
              </view>
              <text class="range-unit">m</text>
              <text class="range-separator">-</text>
              <view class="range-input-box">
                <input
                  class="range-input"
                  type="number"
                  placeholder="+∞"
                  placeholder-style="color: #8da6bd;"
                  v-model="pageData.advancedSearch.liftMax"
                />
              </view>
              <text class="range-unit">m</text>
            </view>
          </view>

          <!-- 提示文本 -->
          <view class="form-tip">
            <text class="form-tip-text">
              提示：请分别输入所有"最大扬程"的"下限数值"和"上限数值"
            </text>
            <text class="form-tip-text">
              如："上限数值"不填或填写数值"0"，则默认"最大扬程"上限为+∞
            </text>
          </view>

          <!-- 最大流量区间 -->
          <view class="form-item">
            <view class="form-label">最大流量区间</view>
            <view class="form-range">
              <view class="range-input-box">
                <input
                  class="range-input"
                  type="number"
                  placeholder="例：110"
                  placeholder-style="color: #8da6bd;"
                  v-model="pageData.advancedSearch.flowMin"
                />
              </view>
              <text class="range-unit">m³/h</text>
              <text class="range-separator">-</text>
              <view class="range-input-box">
                <input
                  class="range-input"
                  type="number"
                  placeholder="+∞"
                  placeholder-style="color: #8da6bd;"
                  v-model="pageData.advancedSearch.flowMax"
                />
              </view>
              <text class="range-unit">m³/h</text>
            </view>
          </view>

          <!-- 提示文本 -->
          <view class="form-tip">
            <text class="form-tip-text">
              提示：请分别输入所有"最大流量"的"下限数值"和"上限数值"
            </text>
            <text class="form-tip-text">
              如："上限数值"不填或填写数值"0"，则默认"最大流量"上限为+∞
            </text>
          </view>

          <!-- 产地选择 -->
          <view class="form-item">
            <view class="form-label">产 地</view>
            <view class="form-select-box" @click="showOriginPicker">
              <text
                class="form-select-text"
                :class="{ placeholder: !pageData.advancedSearch.origin }"
              >
                {{ pageData.advancedSearch.origin || '请选择产地' }}
              </text>
              <image
                class="select-arrow"
                src="/static/images/icons/productCenter/icon_arrow_down.png"
              ></image>
            </view>
          </view>

          <!-- 搜索按钮 -->
          <view class="search-button-container" style="margin-top: 60rpx">
            <button class="dbs-search-button" @click="advancedSearch">DBS产品搜索</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { listBg, loginBg } from '@/static/imgMap'
import ProductBackbar from '@/components/Backbar/ProductBackbar.vue'
import DividerWhite from '@/components/divider/dividerWhite.vue'
import { reactive } from 'vue'

const pageData = reactive({
  tab1: 0,
  tabList1: ['关键字搜索', '高级搜索'],
  loading: false,
  div2Height: 0,
  msgList1: [],
  msgList2: [],
  page: 1,
  limit: 10,
  totalCount: 0,
  keyword: null, // 添加关键词搜索字段
  advancedSearch: {
    model: null,
    code: null,
    liftMin: null,
    liftMax: null,
    flowMin: null,
    flowMax: null,
    origin: null,
  },
  region: ['中国', '丹麦', '匈牙利', '美国', '其他'],
})

// 关键字搜索方法
const searchProducts = () => {
  // if (pageData.keyword == null || pageData.keyword === '') {
  //   uni.showToast({
  //     title: '请输入搜索关键词',
  //     icon: 'none',
  //   })
  //   return
  // }

  // 使用JSON字符串传递参数
  const params = {
    searchType: 'keyword',
    keyword: pageData.keyword,
  }

  uni.navigateTo({
    url: `/pages-sub/productCenter/productCenterResult?searchParams=${encodeURIComponent(JSON.stringify(params))}`,
  })
}

// 高级搜索方法
const advancedSearch = () => {
  const { model, code, liftMin, liftMax, flowMin, flowMax, origin } = pageData.advancedSearch

  // // 检查是否至少填写了一个条件
  // if (!model && !code && !liftMin && !flowMin && !origin) {
  //   uni.showToast({
  //     title: '请至少填写一个查询条件',
  //     icon: 'none',
  //   })
  //   return
  // }

  // 构造查询参数
  const params = {
    searchType: 'advanced',
  }

  if (model) params.model = model
  if (code) params.code = code
  if (liftMin) params.liftMin = liftMin
  if (liftMax && Number(liftMax) > 0) params.liftMax = liftMax
  if (flowMin) params.flowMin = flowMin
  if (flowMax && Number(flowMax) > 0) params.flowMax = flowMax
  if (origin) params.origin = origin

  // 使用 JSON.stringify 传递完整对象，避免复杂的URL参数问题
  uni.navigateTo({
    url: `/pages-sub/productCenter/productCenterResult?searchParams=${encodeURIComponent(JSON.stringify(params))}`,
  })
}

// 显示产地选择器
const showOriginPicker = () => {
  uni.showActionSheet({
    itemList: pageData.region,
    success: (res) => {
      const origins = pageData.region
      pageData.advancedSearch.origin = origins[res.tapIndex]
    },
  })
}

onMounted(() => {
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      uni
        .createSelectorQuery()
        .select('.div1')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })
})
</script>

<style scoped lang="scss">
.entire {
  width: 100%;

  .div1 {
    background-color: rgba(37, 73, 115, 0);

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 120rpx;
      font-size: large;
      color: #fff;
      background: rgba(37, 73, 115, 0);
    }
  }

  .div2 {
    width: 100%;
    overflow-y: scroll;

    .search-container {
      padding: 30rpx;

      .search-tip {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .tip-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 10rpx;
        }

        .tip-text {
          font-size: 28rpx;
          color: #8da6bd;
        }
      }

      .search-box {
        display: flex;
        align-items: center;
        padding: 10rpx;
        margin-bottom: 60rpx;
        background-color: rgba(255, 255, 255, 0);
        border: 2rpx solid #ffffff; /* 添加白色边框，宽度2rpx */
        border-radius: 50rpx;

        .search-icon {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
          margin-left: 5rpx;
        }

        .search-input {
          flex: 1;
          height: 50rpx;
          font-size: 28rpx;
          color: #ffffff;
        }
      }

      .form-item {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
      }

      .form-label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200rpx;
        height: 50rpx;
        margin-right: 20rpx;
        font-size: 28rpx;
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0);
        border-color: white;
        border-style: solid;
        border-width: 2px;
        border-radius: 10rpx;
      }

      .form-input-box {
        flex: 1;
        background-color: rgba(255, 255, 255, 0.1);
        height: 58rpx;
        border: none;
        border-radius: 10rpx;
        padding-left: 10rpx;
        display: flex;
        align-items: center;
      }

      .form-input {
        width: 100%;
        height: 50rpx;
        font-size: 28rpx;
        color: #ffffff;
        background-color: transparent;
      }

      .range-input {
        flex: 1;
        height: 58rpx;
        font-size: 28rpx;
        color: #ffffff;
        background-color: transparent;
      }

      .form-range {
        display: flex;
        flex: 1;
        align-items: center;
      }

      .range-input-box {
        display: flex;
        flex: 1;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        height: 58rpx;
        border-radius: 10rpx;
        padding-left: 10rpx;
        align-items: center;
      }

      .form-select-box {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        padding: 15rpx 20rpx;
        background-color: rgba(255, 255, 255, 0.1);
        border: none;
        border-radius: 10rpx;
      }

      .form-select-text {
        font-size: 28rpx;
        color: #ffffff;
      }

      .placeholder {
        color: #8da6bd;
      }

      .select-arrow {
        width: 30rpx;
        height: 30rpx;
      }

      .search-button-container {
        display: flex;
        justify-content: center;

        .dbs-search-button {
          width: 300rpx;
          height: 80rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #254973;
          background-color: #ffffff;
          border: none;
          border-radius: 50rpx;
        }
      }
    }
  }
}

.range-unit {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #ffffff;
}

.range-separator {
  margin: 0 20rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.form-tip {
  margin-bottom: 30rpx;
}

.form-tip-text {
  display: block;
  font-size: 24rpx;
  line-height: 1.5;
  color: #8da6bd;
}
</style>
